<template>
  <div>
    <el-upload
      :action="action"
      list-type="picture-card"
      :auto-upload="true"
      :on-success="success"
      :on-remove="handleRemove"
      :file-list="fileList"
      accept=".jpg, .png, jpeg"
    >
      <i slot="default" class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>
<script>
import { baseUrl } from "@/config/env";
const urls = {
  upload: baseUrl + "/zweixin/upload",
  download: baseUrl + "/zweixin/download/",
  show: baseUrl + "/zweixin/img/"
};
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      action: urls.upload,
      fileList: [],
      ids: []
    };
  },
  props: {
    file_ids: {
      default: null
    }
  },
  watch: {
    file_ids(val) {
      if (val) {
        this.ids = val.split(",");
        this.fileList = [];
        this.initList();
      }
    }
  },
  methods: {
    success(response, file, fileList) {
      this.ids.push(response.file_id);
      console.log(this.ids);
    },
    handleRemove(file, fileList) {
      if (file.response) {
        var index = this.ids.indexOf(file.response.file_id);
        this.ids.splice(index, 1);
      }
    },
    handlePictureCardPreview(file) {
      // 图片预览
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    initList() {
      var temp = this.ids;
      temp.forEach(element => {
        var file = {
          name: element,
          response: {
            file_id: element
          },
          url: urls.show + element
        };
        this.fileList.push(file);
      });
    }
  }
};
</script>
